<template>
<div>

    <breadcrumb :breadItem3="cityName" :breadItem1="breadItem1" :breadItem2="breadItem2"></breadcrumb>
    <br>
    <div class="shadowed-box">
      <el-form ref="form" label-position="right" label-suffix=":" label-width="90px">
          <br>
          <el-form-item label="订单编号">
              {{orderCode}}
          </el-form-item>
          <el-form-item label="应收佣金">
              {{realReceivableCommission}}元
          </el-form-item>
          <el-form-item label="调佣类型" required>
              <el-radio-group v-model="commissionType">
                  <el-radio :label="1" v-if="canReduce">折佣</el-radio>
                  <el-radio :label="2">赠点</el-radio>
                  <el-radio :label="3">现金奖</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="调佣凭证">
              <!-- <div is="uploadcomponent" v-for="idx in 3" :idx="idx"></div> -->
              <el-upload :action="uploadUrl" :before-upload="handleFileCheck" :on-remove="handleRemove" :on-success="handleSuccess" :default-file-list="fileList" accept=".jpg,.jpeg,.png,.eml">
                <div class="el-upload__tip" slot="tip">只能上传3个jpg/jpeg/png/eml文件，且单个文件不超过3M</div>
                  <el-button size="small" type="primary" v-if="showUploadBtn">点击上传</el-button>
              </el-upload>
          </el-form-item>
          <el-form-item label="实际应收" required>
              <el-input v-model="commissionAfter" name="commissionAfter" placeholder="请输入订单实际应收金额" @change="inputChange" @blur="inputBlur"></el-input>
              <span style='color:red;' id="commissionChangeSpan" v-if="spanShow">调整金额:{{commissionChanged}}元</span>
          </el-form-item>
          <el-form-item label="备注">
              <el-input type="textarea" :rows="2" autosize placeholder="支持输入30个字符" v-model="memo" name="memo" :maxlength="30">
              </el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="danger" onclick="closeWindow()" name="cancel">取消</el-button>
              <el-button type="primary" @click="btnClick" v-if="showAddBtn" name="add">新增</el-button>
          </el-form-item>
          <br>
          <input type="hidden" id="orderId" name="orderId" v-model="orderId" />
          <input type="hidden" id="orderCode" name="orderCode" v-model="orderCode" />
          <input type="hidden" id="projectId" name="projectId" v-model="projectId" />
          <input type="hidden" id="commissionBefore" name="commissionBefore" v-model="commissionBefore" />
      </el-form>
    </div>

</div>
</template>






<script src="./global.js"></script>
<script>
// import $ from 'jquery'
import breadcrumb from '../../Breadcrumb.vue';

export default {
    data() {
        return {
            cityName: '',
            orderCode: '',
            realReceivableCommission: '',
            canReduce: false,
            commissionType: '',
            commissionAfter: '',
            spanShow: false,
            commissionChanged: '',
            memo: '',
            showAddBtn: true,
            breadItem1: '客户单管理',
            breadItem2: '调佣申请',
            valid: false,
            orderId: '',
            projectId: '',
            commissionBefore: '',
            invoicePrice: '',
            commissionReceived: '',
            fileList: [],
            uploadUrl: basePath + 'common/uploadProof',
            showUploadBtn : true
        }
    },
    created: function() {
        var _this = this;
        console.log(_this);
        var url = basePath + 'order/commissionChangeApplyVue?orderId=' + this.$route.params.orderId + '&agentId=' + agentId;
        $.ajax({
            type: 'get',
            url: url,
            success: function(data) {
                if (data.errorCode != 0) {
                    showMsg(data.message);
                }
                _this.cityName = data.cityName;
                _this.orderCode = data.orderCode;
                _this.realReceivableCommission = data.realReceivableCommission;
                _this.canReduce = data.canReduce;
                _this.commissionType = data.canReduce ? 1 : 2;
                _this.orderId = data.orderId;
                _this.projectId = data.projectId;
                _this.commissionBefore = data.realReceivableCommission;
                _this.invoicePrice = data.invoicePrice;
                _this.commissionReceived = data.commissionReceived;
            },
            error: function(data) {
              showMsg(serverError);
            }
        });
        // $.ajax({
        //   type:'get',
        //   async:false,
        //   url:'http://localhost:8081/commission/commissionChangeApply?orderId=159&agentId=56131',
        //   dataType:'jsonp',
        //   jsonp:'callback',
        //   jsonpCallback:'?',
        //   success:function (json) {
        //     console.log(json);
        //   }
        // });
    },
    methods: {
        inputKeyup: function() {
            var _this = this;
            var val = checkNum(document.getElementsByName("commissionAfter"), 2);
            _this.commissionAfter = val;
        },
        inputChange: function(e) {
            var _this = this;
            $("input[name='commissionAfter']").keyup(function() {
                _this.inputKeyup();
            });
        },
        inputBlur: function() {
            this.inputKeyup();
            this.valid = this.showCommissionChanged();
        },
        btnClick: function() {
            if (!this.valid) {
                return;
            }
            this.addCommissionChange();
        },
        handleRemove : function(file, fileList){
          this.fileList = fileList;
          this.showUploadBtn = true;
        },
        handleFileCheck : function(file)  {
          let _this = this;
          if(!file || !checkFile(["jpg","jpeg","png","eml"],file.name,3,file.size)){
            _this.$message({showClose: true,message:"请检查文件类型(jpeg|jpg|png|eml)及文件大小",type:'warning',duration:1500});
            return false;
          }
        },
        handleSuccess : function(response,file,fileList) {
          var _this = this;
            if (response.msg) {
                this.$notify({
                    title: 'warning',
                    message: response.msg,
                    offset: 100,
                    type: 'warning',
                    duration: 1500
                });
                fileList.pop();
                return;
            }
            this.fileList.push({"name":response.name,"url":response.url,"key":response.key});
            if (this.fileList.length == 3) {
              this.showUploadBtn = false;
            }
        },
        showCommissionChanged: function() {
            var rrc = this.commissionAfter;
            var drc = rmoney(this.commissionBefore);
            var commissionType = this.commissionType;
            if (commissionType == 2 || commissionType == 3) {
                if (rrc >= 999999 || rrc <= drc) {
                    this.$notify({
                        title: 'warning',
                        message: "请正确输入实际应收(范围:" + drc + "-999999)",
                        offset: 100,
                        type: 'warning',
                        duration: 1500
                    });
                    this.commissionAfter = '';
                    this.spanShow = false;
                    return false;
                }
            }
            if (commissionType == 1) {
                var micr = this.getMaxInvoiceCommissionRecieved();
                if (rrc <= micr || rrc >= drc) {
                    this.$notify({
                        title: 'warning',
                        message: "请正确输入实际应收(范围:" + micr + "-" + drc + ")",
                        offset: 100,
                        type: 'warning',
                        duration: 1500
                    });
                    this.commissionAfter = '';
                    this.spanShow = false;
                    return false;
                }
            }
            var cc = Math.abs((rrc - drc).toFixed(2));
            cc = fmoney(cc);
            this.commissionChanged = cc;
            this.spanShow = true;
            return true;
        },
        addCommissionChange: function() {
            let _this = this;
            var addCommissionChangeModel = $(".el-form").serializeJson();
            var rrc = this.commissionAfter;

            var drc = rmoney(_this.commissionBefore);
            var commissionType = _this.commissionType;
            if (!commissionType) {
                _this.$notify({
                    title: 'warning',
                    message: '请选择调佣类型',
                    offset: 100,
                    type: 'warning',
                    duration: 1500
                });
                return false;
            }
            if (commissionType == 2 || commissionType == 3) {
                if (rrc >= 999999 || rrc <= drc) {
                    _this.$notify({
                        title: 'warning',
                        message: "请正确输入实际应收(范围:" + drc + "-999999)",
                        offset: 100,
                        type: 'warning',
                        duration: 1500
                    });
                    _this.commissionAfter = '';
                    _this.spanShow = false;
                    return false;
                }
            }
            if (commissionType == 1) {
                var micr = getMaxInvoiceCommissionRecieved();
                if (rrc <= micr || rrc >= drc) {
                    _this.$notify({
                        title: 'warning',
                        message: "请正确输入实际应收(范围:" + micr + "-" + drc + ")",
                        offset: 100,
                        type: 'warning',
                        duration: 1500
                    });
                    _this.commissionAfter = '';
                    _this.spanShow = false;
                    return false;
                }
            }
            if (!rrc) {
                _this.$notify({
                    title: 'warning',
                    message: "请输入实际应收",
                    offset: 100,
                    type: 'warning',
                    duration: 1500
                });
                return false;
            }
            addCommissionChangeModel.commissionAfter = rrc;
            addCommissionChangeModel.commissionBefore = drc;
            addCommissionChangeModel.commissionType = commissionType;
            addCommissionChangeModel.uploadFileModelSet = _this.fileList;

            var url = basePath + 'order/addCommissionChangeVue';

            $.ajax({
                type: 'post',
                url: url,
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify(addCommissionChangeModel),
                dataType:'json',
                success: function(result) {
                    if (!result) {
                        _this.$message({
                            showClose: true,
                            message: "操作失败",
                            type: 'error'
                        });
                    } else if (result.errorCode != 0) {
                        _this.$message({
                            showClose: true,
                            message: result.message,
                            type: 'error'
                        });
                    } else {
                        // window.location = basePath + 'commission/detail/' + result.commissionChangeId;
                        window.location = thisPath + 'commissionChangeDetail/'+ result.commissionChangeId;
                    }
                }
            });
        },
        getMaxInvoiceCommissionRecieved: function() {
            return Math.max(this.invoicePrice / 100, this.commissionReceived / 100);
        }
    },
    components: {
        "breadcrumb": breadcrumb,
        "global": global
    }
}
</script>
<style>
input[name="commissionAfter"] {
    width: 240px;
}

textarea[name="memo"] {
    width: 240px;
}

a {
    color: #20A0FF;
}
</style>
